<template>
	<view class="home">
		<up-swiper :list="list" :height="height" indicator></up-swiper>

		<view class="nav-content">
			<view v-for="item in navList" :key="item.icon">
				<view class="item-nav" @click="navClick(item.url)">
					<view class="icon" :class="item.icon"></view>
					<view class="title">{{item.title}}</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: 200,
				list: [
					'https://g.autoimg.cn/@img/car2/cardfs/product/g32/M0A/79/2B/560x420_c42_autohomecar__ChxkPWbL866AS2bUAAJQJxWENCM827.jpg',
					'https://g.autoimg.cn/@img/car2/cardfs/product/g34/M02/EE/E8/560x420_c42_autohomecar__ChtpWGitJFOAdhaHAAsV7OxMvxs346.jpg',
					'https://g.autoimg.cn/@img/car2/cardfs/product/g33/M07/F8/DF/560x420_c42_autohomecar__ChxpVmitJFGAD6gMAA6yQwReoD4132.jpg',
				],
				navList: [{
						url: '/pages/contractSign/index',
						title: '发起合同',
						icon: 'contract'
					},
					{
						url: '/pages/auditList/index',
						title: '待审核',
						icon: 'pending'
					},
					{
						url: '/pages/contractList/index',
						title: '合同列表',
						icon: 'contract-list'
					},
					{
						url: '/pages/carList/index',
						title: '采购列表',
						icon: 'buy-center'
					},
					{
						url: '/pages/testCar/index',
						title: '检测列表',
						icon: 'test'
					},
					{
						url: '/pages/carZb/index',
						title: '整备列表',
						icon: 'hostling'
					},
					{
						url: '/pages/rejectList/index',
						title: '车辆驳回列表',
						icon: 'reject'
					},
					{
						url: '/pages/contractReject/index',
						title: '合同驳回列表',
						icon: 'contract-reject'
					},
					{
						url: '/pages/userTemplate/index',
						title: '个人模板数据',
						icon: 'user_template'
					},
					{
						url: '/pages/kgList/index',
						title: '完结列表',
						icon: 'finish'
					},
				]
			}
		},
		onLoad() {
			this.showMenu()
		},
		methods: {
			navClick(url) {
				uni.navigateTo({
					url
				})
			},
			showMenu(item) {
				const qx = uni.getStorageSync('qx')
				if (qx != 7) {
					this.navList = this.navList.filter((item) => item.title != '待审核')
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.home {

		.nav-content {
			background-color: #fff;
			padding: 50rpx 20rpx;
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			row-gap: 30rpx;

			.item-nav {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.title {
					font-size: 24rpx
				}

				.icon {
					margin-bottom: 10rpx;
					width: 100rpx;
					height: 100rpx;
					background-repeat: no-repeat;
					background-size: contain;
				}

				.contract {
					background-image: url('/static/home/contract.png');
				}

				.pending {
					background-image: url('/static/home/pending.png');
				}

				.contract-list {
					background-image: url('/static/home/contract-list.png');
				}

				.buy-center {
					background-image: url('/static/home/buy-center.png');
				}

				.test {
					background-image: url('/static/home/test.png');
				}

				.hostling {
					background-image: url('/static/home/hostling.png');
				}

				.reject {
					background-image: url('/static/home/reject.png');
				}

				.finish {
					background-image: url('/static/home/finish.png');
				}

				.user_template {
					background-image: url('/static/home/user_template.png');
				}

				.contract-reject {
					background-image: url('/static/home/contract-reject.png');
				}
			}
		}
	}
</style>